<template>
  <div class="dashboard-container">
    <Overview :overviewData="overviewData" class="grid-full-width" />
    <Orderview :orderviewData="orderviewData" class="grid-full-width" />
    <CuisineStatistics :dishesData="dishesData" />
    <SetMealStatistics :setMealData="setMealData" />
    <OrderList :order-statics="orderviewData" @getOrderListBy3Status="getOrderListBy3Status" class="grid-full-width" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import type { IBusinessData, IOverview, IOrderOverview } from '@/types/workspace';
import type { IOrderStatics } from '@/types/order';
import {
  getBusinessData,
  getOrderData,
  getOverviewDishes,
  getSetMealStatistics,
} from '@/api/index';
import { getOrderStatusStatistics } from '@/api/order';
import Overview from './components/overview.vue';
import Orderview from './components/orderview.vue';
import CuisineStatistics from './components/cuisineStatistics.vue';
import SetMealStatistics from './components/setMealStatistics.vue';
import OrderList from './components/orderList.vue';

const overviewData = ref<IBusinessData>({});
const orderviewData = ref<IOrderOverview>({});
const dishesData = ref<IOverview>({});
const setMealData = ref<IOverview>({});
const orderStatics = ref<IOrderStatics>({});

const fetchDashboardData = async () => {
  try {
    const [businessRes, orderRes, dishesRes, setMealRes] = await Promise.all([
      getBusinessData(),
      getOrderData(),
      getOverviewDishes(),
      getSetMealStatistics(),
    ]);

    if (businessRes.code === 1) overviewData.value = businessRes.data;
    if (orderRes.code === 1) orderviewData.value = orderRes.data;
    if (dishesRes.code === 1) dishesData.value = dishesRes.data;
    if (setMealRes.code === 1) setMealData.value = setMealRes.data;

  } catch (error) {
    console.error("加载工作台数据失败:", error);
    ElMessage.error('加载工作台数据失败，请稍后重试。');
  }
};

const getOrderListBy3Status = async () => {
  try {
    const res = await getOrderStatusStatistics();
    if (res.code === 1) {
      orderStatics.value = res.data;
    } else {
      ElMessage.error(res.msg || '获取订单统计失败');
    }
  } catch (err) {
    console.error('获取订单统计失败:', err);
  }
};

onMounted(() => {
  fetchDashboardData();
});
</script>

<style lang="scss" scoped>
/* 样式优化 */
.dashboard-container {
  // 设置一个浅灰色的背景，让卡片更加突出
  background-color: #f0f2f5;
  padding: 20px;
  display: grid;
  // 使用 grid-gap 控制模块间的间距
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;

  // grid-full-width 类让元素占据整行
  .grid-full-width {
    grid-column: 1 / -1;
  }
}
</style>
